<template>
  <div class="edit_container">
    <div class="title">
      <span> 文章标题： </span>
      <el-input v-model="artical.t" placeholder="请输入内容"></el-input>
    </div>
    <div ref="editor" style="text-align: left"></div>
    <div class="text-right">
      <el-button type="primary" @click="editorSubmit">发布</el-button>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import qs from "qs";
let formatDate = function (date) {
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  return y + "-" + m + "-" + d;
};
var editor;
var that;
export default {
  name: "WriteArticle",
  data: function () {
    return {
      artical: {
        text: "",
        t: "",
        date: formatDate(new Date()),
      },
    };
  },
  mounted: function () {
    that = this;
    editor = new E(that.$refs.editor);
    editor.config.onchange = function (html) {
      that.artical.text = html;
    };
    editor.create();
    let eds = document.getElementsByClassName("w-e-text-container");
    eds[0].style = eds[0].style.cssText + "height: 700px";
  },
  methods: {
    editorSubmit() {
      this.$request({
        url: "/artical/submit",
        method: "post",
        data: qs.stringify(this.artical),
      }).then(() => {
        this.$router.replace("/home/myArtical");
        this.$notify({
          title: "成功",
          message: "文章发布成功！",
          type: "success",
        });
      });
    },
  },
};
</script>


<style scoped>
.text-right {
  padding: 20px 0;
  text-align: right;
}
.title {
  margin: 10px 0;
  width: 300px;
}
.title span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: gray;
}
</style>